<template>
  <!-- 开票审核 invoice_order_listopen.jsp -->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="135px">
          <a-form-item label="部门" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag
              v-model:value="queryParam.ddlxIds"
              mode="multiple"
              dictCode="ddlxType@ddlxUser"
              placeholder="全部"
              :maxTagCount="0"
              :getPopupContainer="(node) => node.parentNode"
              :dropdownStyle="{ width: '120px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
            />
          </a-form-item>
        </a-col>

        <a-col flex="320px">
          <a-form-item label="订单日期" :label-col="{ style: { width: '70px' } }" :wrapper-col="{ style: { width: '250px' } }">
            <a-month-picker
              v-model:value="queryParam.beginDate"
              :disabled-date="disabledStartDate"
              valueFormat="YYYY-MM"
              placeholder=""
              style="width: 110px"
            /> ~
            <a-month-picker
              v-model:value="queryParam.endDate"
              :disabled-date="disabledEndDate"
              valueFormat="YYYY-MM"
              placeholder=""
              style="width: 110px"
            />
          </a-form-item>
        </a-col>

        <a-col flex="145px">
          <a-form-item label="操作人" :label-col="{ style: { width: '55px' } }">
            <JDictSelectTag
              v-model:value="queryParam.userIds"
              mode="multiple"
              dictCode="sys_user,realname,id@authUser"
              placeholder="全部"
              :maxTagCount="0"
              :dropdownStyle="{ width: '120px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
              :allowClear="true"
            />
          </a-form-item>
        </a-col>

        <a-col flex="155px">
          <a-form-item label="订单" :label-col="{ style: { width: '40px' } }">
            <a-input placeholder="" v-model:value="queryParam.orderId" ></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="240px">
          <a-form-item label="公司名称" :label-col="{ style: { width: '65px' } }">
            <a-input placeholder="" v-model:value="queryParam.areaName"></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float:right; width:90px; margin-right: 0px;">
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!--引用表格 :rowSelection="rowSelection"-->
  <BasicTable @register="registerTable" :loading="loading"></BasicTable>

</template>

<script lang="ts" setup name="invoiceReport-openReportAccount">
import { ref, computed, unref, reactive, toRaw, watch } from "vue";
import { BasicColumn, BasicTable } from "/@/components/Table";
import { useListPage } from "/@/hooks/system/useListPage";
import { momentSearchQueryDate } from "/@/utils/dateUtil";
import { render } from "/@/utils/common/renderUtils";
import { defHttp } from "/@/utils/http/axios";
import { filterObj } from "/@/utils/common/compUtils";

import moment from 'dayjs'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';

//初始化 -------------------------------------------------------------
//定义查询表单，查询条件
const queryParam = reactive<any>({
  beginDate : moment().subtract( 1, 'months').format('YYYY-MM'),
  endDate: moment().add( 0, 'months').format('YYYY-MM'),
});

const resetParam = { ...queryParam }

//限制查询日期，开始日期不能大于结束日期
function disabledStartDate(beginDate) {
  const endDate = queryParam.endDate;
  if (!beginDate || !endDate) {
    return false;
  }
  return beginDate.valueOf() > moment(endDate).valueOf()
}

function disabledEndDate(endDate) {
  const beginDate = queryParam.beginDate;
  if (!endDate || !beginDate) {
    return false;
  }
  return moment(beginDate).valueOf() > endDate.valueOf();
}
//初始化 -------------------------------------------------------------
function changeWskchecked(e) {
  queryParam.wskchecked = e.target.checked;
}

//订单列表
const statusFmt = ({text}: { text: any }) => {
  if (!text) {
    return
  }
  const color = text == '2' ? 'red' : text == '3' ? 'green' : 'blue';
  return render.renderTag(render.renderDict(text, 'accountStat'), color)
}

//订单列表 - 表头 customRender: statusFmt
const columns: BasicColumn[] = [
  { dataIndex: "name", title: "归属日期/部门/登记编号", width: 150, align: "left" },
  { dataIndex: "path_name", title: "客户单位", width: 220, align: "left" },
  { dataIndex: "skje", title: "已收款", width: 90, align: "right", className: "text-red-600" },
  { dataIndex: "fkje", title: "已付款", width: 90, align: "right", className: "text-green-600" },
  { dataIndex: "fpje", title: "已开票", width: 90, align: "right", className: "text-red-600" },
  { dataIndex: "fpce", title: "票差", width: 90, align: "right", className: "text-blue-600" },
  { dataIndex: "zscount", title: "总数", width: 55, align: "center", className: "text-red-600" },
  { dataIndex: "ywcount", title: "业务", width: 50, align: "center", className: "text-green-600" },
  { dataIndex: "ywwsq", title: "未申请", width: 60, align: "center" },
  { dataIndex: "ywysq", title: "已申请", width: 60, align: "center" },
  { dataIndex: "ywwsh", title: "未审核", width: 55, align: "center" },
  { dataIndex: "ywysh", title: "已审核", width: 55, align: "center" },
  { dataIndex: "tscount", title: "特殊", width: 55, align: "center" },
  { dataIndex: "tswsh", title: "未审核", width: 55, align: "center" },
  { dataIndex: "tsysh", title: "已审核", width: 55, align: "center" }
]

// 列表页面公共参数、方法
const loading     = ref<boolean>(false);
const dataSource  = ref<any[]>([]);
const summaryData = ref<any[]>([]);
const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
  tableProps: {
    rowKey: "id",
    size: "small",
    dataSource: dataSource,
    columns: columns,
    pagination: false,
    isTreeTable: true,
    striped: true,
    useSearchForm: false,
    bordered: true,
    showTableSetting: false,
    showActionColumn: false,
    resizeHeightOffset: 10,
    indentSize: 8,
    showSummary: true,
    summaryData: summaryData,
    onExpand: onExpand
  },
})

//注册table数据
const [registerTable, { reload }] = tableContext;
const url = "/invoiceReport/openReportAccount";
async function loadData(params) {
  loading.value = true;
  let result = await defHttp.get({ url, params });
  loading.value = false;
  return result;
}

/** 点击展开图标时触发 */
async function onExpand(isExpand, rowData) {
  if (isExpand && rowData.hasChildren === "true" && rowData.children.length === 0) {
    let params = {...queryParam, parentId: rowData.id, type: rowData.type }
    const res = await loadData(filterObj(params));
    rowData.children = res.rows;
  }
}

async function loadRootData() {
  const res = await loadData(filterObj(queryParam));
  if (res) {
    dataSource.value  = res.rows;
    summaryData.value = res.footer;
  } else {
    dataSource.value  = [];
    summaryData.value = [];
  }
}

//
function searchQuery() {
  //reload();
  loadRootData();
}

function searchReset() {
  Object.assign(queryParam, resetParam);
  loadRootData();
}

//默认执行查询
searchQuery();

</script>
<style lang="less" scoped>

</style>
